let out = document.querySelector(".box");
let box = document.querySelector("#bg");
let score = document.querySelector(".box .score span");
let life = document.querySelector(".box .life span");
let p = document.querySelector('.pause');
let enemyGo;
let bulletGo;
let lifeGo;
let my_plane;
let pause = false, died = false;
let e1 = {
    width: 34,
    height: 24
};
let e2 = {
    width: 46,
    height: 60
};
let e3 = {
    width: 110,
    height: 164
};
let jjbs = {
    width: 40,
    height: 45
};

function getRandom(x, y) {
    return Math.floor(Math.random() * (y + 1 - x) + x);
}

// 创建敌机
function createEnemy() {
    let enemy = document.createElement("img");
    enemy.style.position = "absolute";
    enemy.className = "enemy";
    enemy.die = false;
    let type = Math.ceil(Math.random() * 10);
    if (type <= 6) {
        enemy.blood = 2;
        enemy.src = "image/e1.png";
        enemy.model = 1;
        enemy.style.left = getRandom(0, 320 - e1.width) + "px";
        enemy.timeLag = 20;
    } else if (type === 10) {
        enemy.blood = 10;
        enemy.src = "image/e3.png";
        enemy.model = 3;
        enemy.style.left = getRandom(0, 320 - e3.width) + "px";
        enemy.timeLag = 60;
    } else {
        enemy.blood = 5;
        enemy.src = "image/e2.png";
        enemy.model = 2;
        enemy.style.left = getRandom(0, 320 - e2.width) + "px";
        enemy.timeLag = 40;
    }
    enemy.style.top = 0 + "px";
    box.appendChild(enemy);
    enemyBinding(enemy);
}

// 敌机移动
function enemyBinding(enemy) {
    enemy.task = setInterval(function () {
        enemy.style.top = enemy.offsetTop + 2 + "px";
        if (enemy.offsetTop >= 568)
            box.removeChild(enemy);
        if (!enemy.die && my_plane.offsetLeft + my_plane.clientWidth >= enemy.offsetLeft && my_plane.offsetLeft <= enemy.offsetLeft + enemy.clientWidth)
            if (my_plane.offsetTop <= enemy.offsetTop + enemy.clientHeight && my_plane.clientHeight + my_plane.offsetTop >= enemy.offsetTop) {
                life.innerHTML--;
                document.querySelector('.injured').style.visibility = 'visible';
                setTimeout(function () {
                    document.querySelector('.injured').style.visibility = 'hidden';
                }, 100);
                enemyDie(enemy);
                if (life.innerHTML <= 0) {
                    life.innerHTML = 0 + '';
                    clearInterval(bulletGo);
                    clearInterval(enemyGo);
                    clearInterval(lifeGo);
                    box.innerHTML = '';
                    died = true;
                    document.querySelector('.box .restart').style.display = 'block';
                }
            }
    }, enemy.timeLag)
}

// 创建血包
function createLife() {
    let jjb = document.createElement("img");
    jjb.style.position = "absolute";
    jjb.style.zIndex = "1";
    jjb.className = "jjb";
    let prob = Math.ceil(Math.random() * 10);
    if (prob !== 10 || life.innerHTML >= 5)
        return;
    jjb.src = "image/life.png";
    jjb.style.left = getRandom(0, 320 - jjbs.width) + "px";
    jjb.style.top = 0 + "px";
    box.appendChild(jjb);
    jjbBinding(jjb);
}

// 血包移动
function jjbBinding(jjb) {
    jjb.task = setInterval(function () {
        jjb.style.top = jjb.offsetTop + 2 + "px";
        if (jjb.offsetTop >= 568)
            box.removeChild(jjb);
        if (my_plane.offsetLeft + my_plane.clientWidth >= jjb.offsetLeft && my_plane.offsetLeft <= jjb.offsetLeft + jjb.clientWidth)
            if (my_plane.offsetTop <= jjb.offsetTop + jjb.clientHeight && my_plane.clientHeight + my_plane.offsetTop >= jjb.offsetTop) {
                life.innerHTML = parseInt(life.innerHTML) + 1;
                clearInterval(jjb.task);
                if (jjb.parentNode != null)
                    jjb.parentNode.removeChild(jjb);
            }
    }, 40)
}

// 发射子弹
function createBullet(left, top) {
    let bullet = document.createElement("img");
    bullet.style.position = "absolute";
    bullet.className = "bullet";
    bullet.src = "image/bullet1.png";
    bullet.style.left = left + "px";
    bullet.style.top = (top - 15) + "px";
    box.append(bullet);
    bulletBinding(bullet);
}

//子弹移动
function bulletBinding(bullet) {
    bullet.task = setInterval(function () {
        bullet.style.top = bullet.offsetTop - 5 + "px";
        if (bullet.offsetTop <= 0) {
            clearInterval(bullet.task);
            if (bullet.parentNode != null) {
                bullet.parentNode.removeChild(bullet);
            }
        }
        let es = document.querySelectorAll(".enemy");
        for (let i = 0; i < es.length; i++) {
            if (bullet.offsetLeft + bullet.clientWidth >= es[i].offsetLeft && bullet.offsetLeft <= es[i].offsetLeft + es[i].clientWidth) {
                if (!es[i].die && bullet.offsetTop <= es[i].offsetTop + es[i].clientHeight) {
                    if (bullet.parentNode != null) {
                        box.removeChild(bullet);
                    }
                    es[i].blood--;
                    score.innerHTML = parseInt(score.innerHTML) + 1;
                    if (es[i].blood <= 0)
                        enemyDie(es[i]);
                }
            }
        }
    }, 20)
}

//敌机死亡
function enemyDie(some) {
    some.die = true;
    some.src = 'image/delete' + some.model + '.gif';
    setTimeout(function () {
        some.src = 'image/boom.png';
        setTimeout(function () {
            clearInterval(some.task);
            if (some.parentNode != null)
                some.parentNode.removeChild(some);
        }, 100);
    }, some.model === 3 ? 500 : 300);
}

//游戏开始
function start() {
    score.innerHTML = 0 + '';
    life.innerHTML = 3 + '';
    my_plane = document.createElement('img');
    my_plane.src = 'image/me.gif';
    my_plane.style.position = 'absolute';
    my_plane.style.bottom = 0 + 'px';
    box.append(my_plane);
    goGo();
}

function goGo() {
    box.onmouseover = function () {
        // 鼠标的滑动事件
        box.onmousemove = function (e) {
            my_plane.style.left = e.pageX - out.offsetLeft - my_plane.offsetWidth / 2 + "px";
            my_plane.style.top = e.pageY - out.offsetTop - my_plane.offsetHeight / 2 + "px";
        }
    };
    bulletGo = setInterval(function () {
        createBullet(my_plane.offsetLeft + my_plane.offsetWidth / 2, my_plane.offsetTop);
    }, 200);
    enemyGo = setInterval(function () {
        createEnemy();
    }, 1000);
    lifeGo = setInterval(function () {
        createLife();
    }, 1000);
}

//------------------------------------------------------------------------
document.querySelector('.box button').onclick = function () {
    document.querySelector('.box .restart').style.display = 'none';
    died = false;
    start();
};
p.onclick = function () {
    window.addEventListener('keydown', function (e) {
        if (e.key === 'Enter' && !died) {
            let all = document.querySelectorAll('#bg>*');
            let length = all.length;
            if (!pause) {
                pause = true;
                p.innerHTML = 'Enter继续游戏';
                p.style.backgroundColor = '#e1b12c';
                clearInterval(bulletGo);
                clearInterval(enemyGo);
                clearInterval(lifeGo);
                box.onmousemove = null;
                box.onmouseover = null;
                for (let i = 0; i < length; i++) {
                    clearInterval(all[i].task);
                }
            } else {
                pause = false;
                p.innerHTML = 'Enter暂停游戏';
                p.style.backgroundColor = '#7bed9f';
                goGo();
                for (let i = 0; i < length; i++) {
                    if (all[i].className === 'enemy') {
                        enemyBinding(all[i]);
                    } else if (all[i].className === 'jjb') {
                        jjbBinding(all[i]);
                    } else if (all[i].className === 'bullet') {
                        bulletBinding(all[i]);
                    }
                }
            }
        }
    });
    start();
    p.innerHTML = 'Enter暂停游戏';
    p.style.backgroundColor = '#7bed9f';
    p.onclick = null;
};